<template>
	<view class="clearfix">
		<view scroll-x class="top">
			<view class="tab">
				<view class="tab_nav" style='font-size:12px'>
					<view class="setTab" v-for="(item, index) in navData" :key="index"
						:class=" item.state == formData.stateList[0] ? 'active' : ''" @tap="tabSelect(item.state)">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<!--top-->
		<view class="list_wrap">
			<view class="item" v-for="(item, index) in list" :key="item.id" @click="toDetailed(item.id)">
				<view>
				<view class="flex">
					<image :src="item.icon" class="head-img" mode=""></image>
					<view class="l">
						<view class="name">{{item.borrowerName}}入户调查</view>
						<view class="tips">标准入户调查</view>
					</view>
					<view class="r">
						<view class="count-down overtime" v-if="formData.stateList[0]==1">{{item.remainingTime}}</view>
					</view>
				</view>
				
				</view>
				<view class="con">
					<view>{{item.address}}</view>
					<image class="img_address" src="../../static/image/page/surAddress.png"></image>
				</view>
				<view class="bottom">
					<image class="img_Time" src="../../static/image/page/surTime.png"></image>
					<view class="nots">待{{item.emp}}前往客户不动产地址调查</view>
				</view>
			</view>
			<uni-load-more :status="isFinish?'noMore':'more'" v-if="formData.pageNo > 2" />
		</view>
		<view class="nocontent" v-if="list == 0">
			<image src="/static/image/public/WSJ.png" class="wsjImg"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navData: [{
					text: '待预约',
					state: 0
				}, {
					text: '调查中',
					state: 1
				}, {
					text: '已调查',
					state: 4
				}],
				list: [],
				isLoading: false,
				isFinish: false,
				//调查状态
				formData: {
					pageNo: 1,
					pageSize: 10,
					stateList: [0],
					yid: 0,
				},
				type:'', //当前状态

			};
		},
		created() {

		},
		onShow() {
			this.formData.stateList = [0];
			this.formData.pageNo = 1;
			this.list = [];
			this.getSurList();
		},
		onReachBottom: function() {
			!this.isLoading && !this.isFinish && this.getMoreData();

		},
		methods: {
			//选项卡点击事件
			tabSelect(state) {
				this.formData.stateList = [state];
				this.formData.pageNo = 1;
				this.list = [];
				this.getSurList();

			},
			//获取下户列表
			getSurList() {
				this.isLoading = true;
				this.$api.getSurList(this.formData).then(res => {
					let resD = res.data.data;
					this.list = this.list.concat(resD.records);
					this.formData.pageNo = ++this.formData.pageNo;
					this.isLoading = false;
					this.isFinish = !resD.records.length;
				})
			},
			//去往详情界面
			toDetailed(id) {
				if (this.formData.stateList == 0) {
					//带调查
					uni.navigateTo({
						url: `/pages/survey/child/to-investigate?id=${id}`
					})
				} else if (this.formData.stateList == 1) {
					//调查中
					uni.navigateTo({
						url: `/pages/survey/child/orientation-check-in?id=${id}`
					})
				} else {
					//已调差
					console.log(55)
					uni.navigateTo({
						url: `/pages/survey/child/surveyed?id=${id}`
					})
				}

			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss">
	.top {
		width: 100%;
		white-space: nowrap;
		position: fixed;
		top: var(--window-top);
		z-index: 99;
		left: 0;
		background: $dtg-color-primary;

		.tab {
			display: flex;
			flex-direction: column;
			border-radius: 20rpx 20rpx 0 0;
			background: #F8F8F8;
		}

		.tab_nav {
			height: 80rpx;
			display: flex;
			line-height: 79rpx;
			position: relative;
			font-size: 28rpx;
			justify-content: space-between;
			padding: 0 150rpx;
		}

		.setTab {
			text-align: center;
			height: 80rpx;
			color: black;
			font-size: 26rpx;
			color: #999999;
		}

		.active {
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
		}

		.active::after {
			content: "";
			width: 40rpx;
			height: 4rpx;
			background: $dtg-color-primary;
			border-radius: 4rpx;
			margin: -8rpx auto;
			display: block;
			animation: roll .23s linear;
		}

		@keyframes roll {
			0% {
				width: 0;
			}

			100% {
				width: 40rpx;
			}
		}

		.con {
			overflow: hidden;
		}
	}

	.list_wrap {
		margin: 90rpx 30rpx 0;

		.item {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 18rpx;
			margin-bottom: 20rpx;

			.t {
				display: flex;
				align-items: center;
				justify-content: space-between;




				.status {
					border: 2rpx solid #585CF7;
					border-radius: 40rpx;
					padding: 5rpx 20rpx;
					font-size: 24rpx;
					color: #585CF7;
				}
			}

			.con,
			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
			}

			.con {
				border-bottom: 2rpx solid #eee;
				padding-bottom: 20rpx;
			}

			.nots {
				flex: 1;
				font-size: 26rpx;
				color: #999
			}

			.img_address {
				width: 24rpx;
				height: 30rpx;
				flex-shrink: 0;
				margin-left: 20rpx;
			}

			.img_Time {
				width: 26rpx;
				height: 26rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
		}

	}

	.name {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
	}

	.tips {
		color: #999999;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.head-img {
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.count-down {
	  height: 46rpx;
	  border: 2rpx solid #585CF7;
	  border-radius: 23rpx;
	  padding: 0 18rpx;
	  line-height: 44rpx;
	  font-size: 22rpx;
	  font-weight: bold;
	  color: #585CF7;
	}
	
	.overtime {
	  background: #FC4073;
	  border: 2rpx solid #FC4073;
	  color: #FFFFFF;
	}
	.r{
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
</style>
